<template>
  <div class="page-left">
    <div class="item-top">
      <leftTitle name="企业介绍" />
      <div class="info">{{ produce }}</div>
      <ul class="list">
        <li v-for="item in partnersLogo">
          <img :src="item.logoAddress" alt="" />
        </li>
      </ul>
    </div>
    <div class="item-bottom">
      <rightTitle name="生产基地" :count="count" />
      <Vue3SeamlessScroll :list="jdList" :step="0.5" :limitScrollNum="2" :hover="true" >
          <div v-for="item in jdList[0]" class="info-item">
            <div class="list-title">
              {{ item.name }}
            </div>
            <div class="item-info">
              <img :src="item.url" alt="" />
              <div class="text-list">
                <div>成立时间：{{ item.createTime }}</div>
                <div>面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积：{{ item.area }}</div>
                <div>业务产品：{{ item.production }}</div>
                <div>总&nbsp;&nbsp;人&nbsp;&nbsp;数：{{ item.total }}</div>
              </div>
            </div>
          </div>
      </Vue3SeamlessScroll>

    </div>
  </div>
  <ul class="page-center">
    <li v-for="(item, index) in videoList">
      <div class="title">{{ item.name }}</div>
      <div class="content player-box">
        <img :src="item.url || item.image" alt="" v-if="index > 0">
        <centerVideo    videoId="videoBig" :url="item.url" class="my-video" ref="centerVideoRef"  v-else/>
      </div>
    </li>
  </ul>
  <div class="page-right">
    <div class="item-top">
      <leftTitle name="公司概况" />
      <ul>
        <li v-for="item in rightTopList">
          <img :src="item.icon" alt="" />
          <div class="info">
            <span class="info-name">{{ item.name }}</span>
            <span class="info-num">{{ item.num }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="item-bottom">
      <leftTitle name="市场分布" />
      <div class="chart-list">
        <div class="item">
          <div class="list-title">
            国外市场分布
          </div>
          <div class="chart-box">
            <circleLChart ref="mapchart1Ref" />
          </div>
        </div>
        <div class="item">
          <div class="list-title">
            国内市场分布
          </div>
          <div class="chart-box">
            <circleChart ref="mapchart2Ref" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import leftTitle from '@/components/leftTitle.vue'
import rightTitle from '@/components/rightTitle.vue'
import serveodel from '@/api'
import centerVideo from '@/components/centerVideo.vue'
import circleLChart from '@/components/circleLChart.vue'
import circleChart from '@/components/circleChart.vue'

import icon0 from '@/assets/images/page1/icon-0.png'
import icon1 from '@/assets/images/page1/icon-1.png'
import icon2 from '@/assets/images/page1/icon-2.png'
import icon3 from '@/assets/images/page1/icon-3.png'
import icon4 from '@/assets/images/page1/icon-4.png'
import icon5 from '@/assets/images/page1/icon-5.png'
let restData = ref()
let produce = ref('')
let partnersLogo = ref([])
let count = ref(0)
let jdList = ref([])
let rightTopList = ref([])
let mapchart1Ref = ref()
let mapchart2Ref = ref()
let videoList = ref([])
let centerVideoRef = ref(null)
const initData = async () => {
  const { data } = await serveodel.getData({
    boardId: '16',
    deptId: '1789206421226201090'
  })
  let result = {}
  data.map(item => {
    result[item.interfaceName] = JSON.parse(item.bulletinData)
  })
  restData.value = result
  console.log(result)
  //简介
  produce.value = result['企业简介'].data[0]?.gardenIntroduction
  //品牌列表
  partnersLogo.value = result['企业简介'].data[0]?.partnersLogo
  //生产基地
  count.value = result['生产基地'].data?.total
  jdList.value = [result['生产基地'].data?.info,result['生产基地'].data?.info]
  //公司概况
  let icons = [icon0, icon1, icon2, icon3, icon4, icon5]
  rightTopList.value = result['公司概况'].data.map((item, index) => {
    return {
      ...item,
      icon: icons[index]
    }
  })
  //市场分析
  mapchart1Ref.value.initChart(result['市场分析'].data.GlobalData)
  mapchart2Ref.value.initChart(result['市场分析'].data.ChinaData)
  result['加工基地'].data.unshift(result['加工基地'].data.splice(result['加工基地'].data.length - 1, 1)[0])
  // 加工基地
  videoList.value = result['加工基地'].data
  nextTick(() => {
    centerVideoRef.value[0].initPlayer()
  })
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.page-left {
  position: absolute;
  left: 0;
  height: 100%;
  width: 21.5%;
  display: flex;
  flex-direction: column;

  .item-top {
    height: 55%;
    display: flex;
    flex-direction: column;

    .info {
      height: 61%;
      font-size: 0.7vh;
      padding: 15px 10px 10px 10px;
      letter-spacing: 2px;
      text-indent: 32px;
    }

    .list {
      width: 100%;
      height: 28%;
      background: url('@/assets/images/page1/kuang.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      padding: 10px;
      overflow: hidden;

      li {
        width: 45%;
        height: 45%;
        margin: 5px;
        overflow: hidden;

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .item-bottom {
    height: 45%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;

    >div {
      overflow: hidden;
    }


      .info-item {
        margin: 2px 0;
        height: 155px;
        width: 100%;
        background: url('@/assets/images/page1/left-list-item-bg.png') no-repeat center;
        background-size: 100% 100%;

        .list-title {
          margin-top: 10px;
          width: 90%;
          margin-left: 3%;
          height: 30px;
          background: url('@/assets/images/page1/list-title-bg.png') no-repeat center;
          background-size: 100% auto;
          text-indent: 26px;
          font-size: 0.9vh;
        }

        .item-info {
          height: calc(100% - 40px);
          width: 100%;
          display: flex;
          padding: 10px 20px;

          img {
            width: 52%;
            height: 100%;
          }

          .text-list {
            width: 48%;
            height: 100%;
            padding-left: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: 0.8vh;

            div {
              overflow: hidden;
              /* 确保溢出的内容会被隐藏 */
              white-space: nowrap;
              /* 确保文本在一行内显示，不换行 */
              text-overflow: ellipsis;
              /* 使用省略号表示文本溢出 */
            }
          }
        }
      }
  }
}

.page-right {
  position: absolute;
  right: 0;
  height: 100%;
  width: 21.5%;
  display: flex;
  flex-direction: column;

  .item-top {
    height: 40%;
    display: flex;
    flex-direction: column;

    ul {
      width: 100%;
      height: calc(100% - 42px);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;

      li {
        width: 50%;
        height: 33%;
        display: flex;
        align-items: center;

        img {
          width: 22%;
          height: auto;
        }

        .info {
          width: 78%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .info-name {
            color: #C7DFFC;
            font-size: 0.8vh;
          }

          .info-num {
            font-family: AgencyFB-Bold;
            color: #fff;
            text-shadow: 0 0 18px rgba(2, 139, 255, 0.86),
              0 0 18px rgba(2, 139, 255, 0.86);
            font-size: 1.2vh;
          }
        }
      }
    }
  }

  .item-bottom {
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .chart-list {
      height: calc(100% - 42px);

      .item {
        overflow: hidden;
        width: 100%;
        height: 50%;
      }
    }

    .list-title {
      margin-top: 10px;
      width: 90%;
      margin-left: 3%;
      height: 30px;
      background: url('@/assets/images/page1/list-title-bg.png') no-repeat center;
      background-size: 100% auto;
      text-indent: 26px;
      font-size: 14px;
    }

    .chart-box {
      width: 100%;
      background: url('@/assets/images/page1/left-list-item-bg.png') no-repeat;
      background-size: 100% 100%;
      height: calc(100% - 40px);
    }
  }
}

.page-center {
  width: 54%;
  height: 18%;
  display: flex;
  align-self: flex-end;
  margin-bottom: 20px;
  justify-content: space-between;

  li {
    width: 19%;
    height: 100%;

    .title {
      height: 22%;
      width: 100%;
      background: url('@/assets/images/page1/video-title-bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      font-size: .8vh;
      align-items: center;
      justify-content: center;
    }

    .content {
      margin-top: 3%;
      height: 75%;
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }

      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>